<!--角色管理 -->
<template>
  <div>
    <el-row type="flex" justify="center" class="operator_button_row">
      <el-col :span="23">
        <el-button v-permission="['system/roles/addRole']" size="small" type="primary">添加角色</el-button>
        <el-button v-permission="['system/roles/deleteBatch']" size="small" type="danger">批量删除</el-button>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="23">
        <el-alert title type="success" :closable="false" show-icon class="alert_bottom">
          已选择
          <span>{{0}}</span> 项
          <a @click="clearSelectAll" style="color:red">清空</a>
        </el-alert>

        <el-table
          size="small"
          ref="multipleTable"
          :border="false"
          :data="tableData"
          tooltip-effect="dark"
          style="width:100%"
          height="550"
          :highlight-current-row="true"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="roleName" label="角色名称" width="200"></el-table-column>
          <el-table-column prop="roleDesc" label="描述" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="200"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                v-permission="['system/roles/assignRoles']"
                @click="assignRole(scope.row)"
                type="primary"
                size="mini"
              >分配权限</el-button>
              <el-button v-permission="['system/roles/edit']" type="warning" size="mini">编辑</el-button>
              <el-button v-permission="['system/roles/delete']" type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row type="flex" justify="end">
      <el-col :span="8">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.pageNumber"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <!-- 弹框 分配权限-->
    <el-dialog
      top="6vh"
      title="分配权限"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="closeDialog"
    >
      <div style="max-height:600px;overflow:scroll">
        <el-input
          style="margin-bottom:20px;width:250px"
          placeholder="输入关键字进行过滤"
          v-model="filterText"
        ></el-input>

        <!--  :check-strictly="true" 这个属性很重要，element-ui不支持多选，只能将其不父子不关联，否则如果只有一个按钮 则父级选中 
        展示的时候 按钮也会被选择， 这个和 iview 有差别-->
        <el-tree
          :data="data"
          show-checkbox
          default-expand-all
          :expand-on-click-node="false"
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
          :filter-node-method="filterNode"
          :check-strictly="true"
          :default-checked-keys="assignRoleList"
        ></el-tree>
      </div>
      <el-row type="flex" justify="end" style="margin-top:20px">
        <el-col :span="7">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" @click="submit" type="primary">提交</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { menulist } from "@/api/system/menu-api";
import { findRoleMenuIds, roleMenuSubmit } from "@/api/system/role-menu-api";
import { findRole } from "@/api/system/role-api";
export default {
  /* eslint-disable */
  name: "roles",
  data() {
    return {
      // page
      total: 0,
      curRoleId: 0,
      assignRoleList: [],
      filterText: "",
      dialogVisible: false,
      data: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      searchForm: {
        pageNumber: 0,
        pageSize: 10
      },
      tableData: []
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    addSubMenu() {},
    handleSelectionChange() {},
    //分配权限 提交按钮
    submit() {
      const params = {
        menuIds: this.$refs.tree.getCheckedKeys(),
        roleId: this.curRoleId
      };
      roleMenuSubmit(params).then(response => {
        if (response.msg === "success") {
          this.$message({ message: "提交成功", type: "success" });
          this.closeDialog();
        }
      });
    },
    //分配权限
    assignRole(row) {
      menulist({ all: 1 }).then(response => {
        this.data = response.data;
      });

      findRoleMenuIds({ roleId: row.id }).then(response => {
        this.assignRoleList = response.data;
      });
      this.curRoleId = row.id;
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    //清除所有选择的
    clearSelectAll() {},
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    init() {
      findRole(this.searchForm).then(response => {
        if (response.msg === "success") {
          this.total = response.data.totalElements;
          this.tableData = response.data.content;
        }
      });
    },
    //page
    handleSizeChange(pageSize) {
      this.searchForm.pageSize = pageSize;
      this.init();
    },
    handleCurrentChange(pageNumber) {
      this.searchForm.pageNumber = pageNumber;
      this.init();
    }
  },

  created() {
    this.init();
  }
};
</script>

<style scoped>
/* eslint-disable */
.operator_button_row {
  height: 60px;
  margin-top: 20px;
}
.alert_bottom {
  margin-bottom: 20px;
}
/* eslint-disable */
</style>